<template>
  <div class="english-quiz">
    <!-- 页面头部 -->
    <header class="quiz-header">
      <h1>英语单选题练习</h1>
      <div class="quiz-info">
        <span>共 {{ questions.length }} 题</span>
        <span v-if="isSubmitted">得分: {{ score }}/{{ questions.length }}</span>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="quiz-main">
      <!-- 题目列表 -->
      <div class="questions-container">
        <div 
          v-for="(question, index) in questions" 
          :key="index" 
          class="question-card"
          :class="{
            'answered': question.userAnswer !== null,
            'correct': isSubmitted && question.userAnswer === question.correctAnswer,
            'incorrect': isSubmitted && question.userAnswer !== null && question.userAnswer !== question.correctAnswer
          }"
        >
          <!-- 题号和问题 -->
          <div class="question-header">
            <span class="question-number">{{ index + 1 }}.</span>
            <p class="question-text">{{ question.text }}</p>
          </div>

          <!-- 选项列表 -->
          <div class="options">
            <div 
              v-for="(option, optIndex) in question.options" 
              :key="optIndex"
              class="option"
              :class="{
                'selected': question.userAnswer === optIndex,
                'correct-answer': isSubmitted && optIndex === question.correctAnswer,
                'wrong-answer': isSubmitted && question.userAnswer === optIndex && optIndex !== question.correctAnswer
              }"
              @click="selectOption(index, optIndex)"
              :disabled="isSubmitted"
            >
              <span class="option-letter">{{ String.fromCharCode(65 + optIndex) }}</span>
              <span class="option-text">{{ option }}</span>
            </div>
          </div>

          <!-- 答案解析（提交后显示） -->
          <div v-if="isSubmitted" class="explanation">
            <p class="explanation-title">解析:</p>
            <p class="explanation-text">{{ question.explanation }}</p>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="button-group">
        <button 
          class="submit-btn"
          @click="submitQuiz"
          :disabled="isSubmitted || !allAnswered"
        >
          提交答案
        </button>
        <button 
          class="reset-btn"
          @click="resetQuiz"
        >
          重新开始
        </button>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 题目数据
const questions = ref([
  {
    text: "She ____ to school every day.",
    options: [
      "go",
      "goes",
      "went",
      "gone"
    ],
    correctAnswer: 1, // 正确选项索引 (B)
    explanation: "主语是第三人称单数 She，一般现在时动词要加 s，所以用 goes。",
    userAnswer: null // 用户选择的选项索引，初始为 null
  },
  {
    text: "I ____ a book when he came in.",
    options: [
      "read",
      "am reading",
      "was reading",
      "have read"
    ],
    correctAnswer: 2, // 正确选项索引 (C)
    explanation: "when 引导的时间状语从句用一般过去时，主句用过去进行时，表示过去某个时刻正在进行的动作。",
    userAnswer: null
  },
  {
    text: "He has been living here ____ 2010.",
    options: [
      "for",
      "since",
      "in",
      "on"
    ],
    correctAnswer: 1, // 正确选项索引 (B)
    explanation: "since 后面接时间点，表示从过去某一时间点开始一直持续到现在；for 后面接时间段。",
    userAnswer: null
  },
  {
    text: "____ you pass me the salt, please?",
    options: [
      "Should",
      "Must",
      "Would",
      "Will"
    ],
    correctAnswer: 2, // 正确选项索引 (C)
    explanation: "Would you... 是请求别人做某事的礼貌表达方式。",
    userAnswer: null
  },
  {
    text: "The book ____ by J.K. Rowling.",
    options: [
      "writes",
      "is written",
      "wrote",
      "was written"
    ],
    correctAnswer: 3, // 正确选项索引 (D)
    explanation: "书是被写的，所以用被动语态；动作发生在过去，用一般过去时的被动语态。",
    userAnswer: null
  }
]);

// 状态管理
const isSubmitted = ref(false);

// 选择选项
const selectOption = (questionIndex, optionIndex) => {
  if (!isSubmitted) {
    questions.value[questionIndex].userAnswer = optionIndex;
  }
};

// 检查是否所有题目都已回答
const allAnswered = computed(() => {
  return questions.value.every(q => q.userAnswer !== null);
});

// 提交答案
const submitQuiz = () => {
  isSubmitted.value = true;
};

// 重置测验
const resetQuiz = () => {
  questions.value.forEach(q => {
    q.userAnswer = null;
  });
  isSubmitted.value = false;
};

// 计算得分
const score = computed(() => {
  return questions.value.filter(q => q.userAnswer === q.correctAnswer).length;
});
</script>

<style scoped>
.english-quiz {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 头部样式 */
.quiz-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #3b82f6;
}

.quiz-header h1 {
  color: #1e40af;
  margin-bottom: 10px;
}

.quiz-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #666;
}

/* 主要内容区 */
.quiz-main {
  margin-bottom: 40px;
}

.questions-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.question-card {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.question-card.answered {
  border-left: 4px solid #3b82f6;
}

.question-card.correct {
  border-left: 4px solid #10b981;
  background-color: #f0fdf4;
}

.question-card.incorrect {
  border-left: 4px solid #ef4444;
  background-color: #fef2f2;
}

.question-header {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.question-number {
  font-weight: bold;
  color: #1e40af;
  margin-right: 10px;
  min-width: 24px;
  text-align: center;
}

.question-text {
  margin: 0;
  font-size: 18px;
  color: #1e293b;
}

/* 选项样式 */
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.option {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option:hover:not(:disabled) {
  background-color: #eff6ff;
  border-color: #93c5fd;
}

.option:disabled {
  cursor: default;
}

.option.selected {
  background-color: #dbeafe;
  border-color: #3b82f6;
}

.option-letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
}

.option.correct-answer .option-letter {
  background-color: #10b981;
}

.option.wrong-answer .option-letter {
  background-color: #ef4444;
}

.option-text {
  flex: 1;
}

.option.correct-answer {
  background-color: #dcfce7;
  border-color: #10b981;
}

.option.wrong-answer {
  background-color: #fee2e2;
  border-color: #ef4444;
}

/* 解析样式 */
.explanation {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #e2e8f0;
}

.explanation-title {
  margin: 0 0 5px 0;
  font-weight: bold;
  color: #0f766e;
}

.explanation-text {
  margin: 0;
  color: #374151;
  font-size: 14px;
  padding-left: 5px;
}

/* 按钮样式 */
.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.submit-btn, .reset-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submit-btn {
  background-color: #3b82f6;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background-color: #2563eb;
  transform: translateY(-2px);
}

.submit-btn:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

.reset-btn {
  background-color: #f3f4f6;
  color: #374151;
}

.reset-btn:hover {
  background-color: #e5e7eb;
  transform: translateY(-2px);
}

/* 页脚样式 */
.quiz-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .question-text {
    font-size: 16px;
  }
  
  .button-group {
    flex-direction: column;
  }
  
  .submit-btn, .reset-btn {
    width: 100%;
  }
}
</style>